<template>
	<view id="app">
		<form @submit="formSubmit" @reset="formReset">
			<view class="imgClass">
				<view >
						 <view>
						 	<uImg  ref="upimg"
						 		:canUploadFile="true" 
						 		:limit="limitNum"
						 		:uploadFileUrl="uploadFileUrl" 
						 		:heaer="header" 
						 		:fileKeyName="name"
						 		:uImgList.sync="uImgList" 
						 		@uploadSuccess="uploadSuccess"></uImg>
						 </view>
					
				</view>
			</view>
			<view class="infoline">
				<view class="line-left">
					<view class="infoname">昵称</view>
				</view>
				<view class="line-right" style="color: gray;">
					<input type="text" placeholder="点击填写" class="input_name" name="nickName" style="text-align: right;">
				</view>
			</view>
			
			<view class="infoline">
				<view class="line-left">
					<view class="infoname">性别</view>
				</view>
				<view class="uni-list-cell line-right line-right2" style="color: gray;">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
			</view>
			
			<view  class="infoline infoline_height">
				<view  class="line-left">
					<view  class="infoname">身高</view>
				</view>
				<view class="uni-list-cell line-right line-right2" style="color: gray;">
					<picker @change="bindHeightPickerChange" :value="heightIndex" :range="heightArray">
						<view class="uni-input">{{heightArray[heightIndex]}}</view>
					</picker>
				</view>
			</view>
			
			<view  class="infoline">
				<view  class="line-left">
					<view  class="infoname">生日</view>
				</view>
				 <view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<!-- 取消时间范围的控制（:start="startDate" :end="endDate"），暂时没找到限制时间范围显示的方法。 -->
							<picker mode="date" :value="date" @change="bindDateChange">
								<view class="uni-input">{{date}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			
			<view  class="infoline">
				<view  class="line-left">
					<view  class="infoname">城市</view>
				</view>
				<view style="color: gray;" @tap="openAddres">{{pickerText}}
				        <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></simple-address>
				</view>
			</view>
			
			<!-- <view  class="infoline">
				<view  class="line-left">
					<view  class="infoname">现状</view>
				</view>
				<view class="uni-list-cell line-right line-right2" style="color: gray;">
					<picker @change="bindWorkPickerChange" :value="workIndex" :range="workArray">
						<view class="uni-input">{{workArray[workIndex]}}</view>
					</picker>
				</view>
			</view> -->
			
			<view  class="infoline">
				<view  class="line-left">
					<view  class="infoname">学校</view>
				</view>
				<view>
					<view style="color: gray;" @click="toPopup()">未知</view>
					<view >
						<uni-popup ref="popup" type="center">
								<view class="mint-popup school_mask" style="top: 300px;">
									<view  class="school_line1" >
										国内毕业院校：
										<input type="text" placeholder="点击填写" style="color: gray; text-align:center;" v-model="inputVal" @input="remoteMethod1">
									</view>
								
									<view class="uni-combox__selector school_result" >
										<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
											<view class="uni-combox__selector-item" v-for="(item,index) in schoolList" :key="index" @click="onSelectorClick(index)">
												<text>{{item.label}}</text>
											</view>
										</scroll-view>
									</view>
									<view>
										海外留学生
										<span class="font_gray">(海外留学生点击此处)</span>
									</view>
								</view>
						</uni-popup>
					</view>
				</view>
			</view>
			
			<view  class="infoline">
				<view  class="line-left">
					<view  class="infoname">学历</view>
				</view>
				<view class="uni-list-cell line-right line-right2" style="color: gray;">
					<picker @change="bindLevelPickerChange" :value="levelIndex" :range="levelArray">
						<view class="uni-input">{{levelArray[levelIndex]}}</view>
					</picker>
				</view>
			</view>
			
			<view  class="infoline">
				<view  class="line-left">
					<view  class="infoname">星座</view>
				</view>
				<view class="uni-list-cell line-right line-right2" style="color: gray;">
					<picker @change="bindStarPickerChange" :value="starIndex" :range="starArray">
						<view class="uni-input">{{starArray[starIndex]}}</view>
					</picker>
				</view>
			</view>
			
			<view class="infoline">
				<view class="line-left">
					<view class="infoname">微信</view>
				</view>
				<view class="line-right" style="color: gray;">
					<input type="text" placeholder="(微信与QQ不可均为空)" class="input_name" name="nickName" style="text-align: right;">
				</view>
			</view>
			
			<view class="infoline">
				<view class="line-left">
					<view class="infoname">QQ</view>
				</view>
				<view class="line-right" style="color: gray;">
					<input type="text" placeholder="(微信与QQ不可均为空)" class="input_name" name="nickName" style="text-align: right;">
				</view>
			</view>
		</form>
				
		<view  class="confirm">下一步</view>
	</view>
</template>

<script>
	import simpleAddress from "@/components/simple-address/simple-address.nvue"
	import popup from '../../components/lvv-popup/lvv-popup.vue'
	import uniCombox from '@/components/uni-combox/uni-combox.vue'
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import uImg from '@/components/zhtx-uploadImg/zhtx-uploadImg.vue'
	export default {
		components: {
		    simpleAddress,
			popup,
			uniCombox,
			uniPopup,
			uImg
		},
		data() {
			 const currentDate = this.getDate({format: true})
			return {
				// 图片上传数据
				msg:'',
				length:140,
				placeholder:'',
				limitNum:1,
				uploadFileUrl: 'http://localhost:8081/test', //替换成你的后端接收文件地址
				name:'file', //上传的名字
				header: {// 如果需要header，请上传
				},
				uImgList: [],
				
				index: 0,
				array: ['男', '女'],
				heightIndex: 30,
				heightArray:['140-', '141', '142', '143', '144', '145', '146', '147', '148', '149', '150', '151', '152', '153', '154', '155', '156', '157', '158', '159', '160', '161', '162', '163', '164', '165', '166', '167', '168', '169', '170', '171', '172', '173', '174', '175', '176', '177', '178', '179', '180', '181', '182', '183', '184', '185', '186', '187', '188', '189', '190', '191', '192', '193', '194', '195', '196', '197', '198', '199', '200+'],
				workIndex: 0,
				workArray:['上班族','学生党','创业者'],
				levelIndex: 0,
				levelArray:['本科','硕士','博士','大专','高中'],
				starIndex: 0,
				starArray:['水瓶座','双鱼座','金牛座','白羊座','双子座','巨蟹座','狮子座','处女座','天秤座','天蝎座','射手座','摩羯座'],
				cityPickerValueDefault: [0, 1],
				pickerText: '选择省市',
				date: currentDate,
				showModel:false,
				
				model13: '',
				loading1: false,
				schoolList: [],
				list: ['北京', '南京', '东京', '武汉', '天津', '上海', '海口','广州', '湛江', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut'],
				school:'',
				inputVal: ''
			}
		},
		computed: {	
		},
		onShow() {
			document.title = "72小时cp报名活动-填写资料";
		},
		methods: {
			uploadSuccess(result) {
				if(result.statusCode == 200) {
					//上传成功的回调处理
					toast('上传成功')
				}else{
					toast('上传失败')
				}
			},
			upFile(){
				this.$refs.upimg.upload()
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			bindHeightPickerChange: function(e) {
				this.heightIndex = e.target.value
			},
			bindWorkPickerChange: function(e) {
				this.workIndex = e.target.value
			},
			bindLevelPickerChange: function(e) {
				this.levelIndex = e.target.value
			},
			bindStarPickerChange: function(e) {
				this.starIndex = e.target.value
			},
			bindDateChange: function(e) {
				console.log()
				this.date = e.target.value
			},
			openAddres() {
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				console.log(e);
				this.pickerText = e.label.substring(0,e.label.length);
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				
				if (type === 'start') {
					year = year - 200;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			toPopup(){
				this.$refs.popup.open();
				this.schoolList = this.list.map(item => {
						return {
							value: item,
							label: item
						};
					});
			},
			remoteMethod1:function(e) {
				
				if (e.detail !== '') {
					setTimeout(() => {
						const list = this.list.map(item => {
							return {
								value: item,
								label: item
							};
						});
						
						this.schoolList = list.filter(item => {
							return item.label.indexOf(e.detail.value) > -1
						});
						console.log(this.schoolList);
					}, 200);
				} else {
					this.schoolList = this.list.map(item => {
							return {
								value: item,
								label: item
							};
						});
				}
			},
			onSelectorClick(index) {
				this.inputVal = this.schoolList[index].label;
			}
		}
	}
</script>

<style>
	@import "../../allUI/index.css";
	@import "../../allUI/user.css";
	
	.content{
		width: 100%;
		min-height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.showBtn{
		margin-top: 20rpx;
	}
	.popupBg{
		background: #ffffff;
		flex-direction:column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
	
	.uni-combox__selector-item {
	
		line-height: 20px;
		font-size: 14px;
		text-align: center;
		margin: 0px 10px;
	}
	.uni-combox__selector-scroll {
		max-height: 150px;
	}
	
	.imgClass{
	}
	.infoline {
	    margin: 0 auto;
		padding: 0px 30rpx 0px 20rpx;
	    line-height: 90rpx;
	    /* width: 95%; */
		border: 1px solid #f3f2f2;border-left:none; border-right:none;border-top:none;
	}
	div {
	    display: block;
	}
/* 	.line-right{
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	} */
	.line-left, .line-right {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	}
	.mint-popup {
	    position: fixed;
	    background: #fff;
	    top: 50%;
	    left: 50%;
	    transform: translate3d(-50%,-50%,0);
	    -webkit-backface-visibility: hidden;
	    backface-visibility: hidden;
	    transition: .2s ease-out;
	}
	.school_mask{
	    width: 100%;
	    padding-bottom: 20px;
	}
	#app {
	    font-family: Avenir,Helvetica,Arial,sans-serif;
	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
	    text-align: center;
	    color: #000000;
	}
	.input_name {
	    border: none;
	    color: gray;
	    font-size: 15px;
	    padding-right: 10px;
	}
	input {
		-webkit-appearance: textfield;
		background-color: white;
		-webkit-rtl-ordering: logical;
		cursor: text;
		padding: 1px;
		border-width: 2px;
		border-style: inset;
		border-color: initial;
		border-image: initial;
		border-image-source: initial;
		border-image-slice: initial;
		border-image-width: initial;
		border-image-outset: initial;
		border-image-repeat: initial;
	}
	input, textarea, select, button {
	    text-rendering: auto;
	    color: initial;
	    letter-spacing: normal;
	    word-spacing: normal;
	    text-transform: none;
	    text-indent: 0px;
	    text-shadow: none;
	    display: inline-block;
	    text-align: start;
	    margin: 0em;
	    font: 400 13.3333px Arial;
	}
	input, textarea, select, button, meter, progress {
	    -webkit-writing-mode: horizontal-tb !important;
	}
	.school_result{
	    overflow: scroll;
	    height: 200px;
	}
	.school_item{
	    height: 30px;
	}
	.school_line2 {
	    text-align: left;
	    padding-left: 20px;
	}
	.font_gray {
	    color: gray;
	    font-size: 13px;
	}

</style>
